~(function () {
 var table = [
    "H", "Hydrogen", "1.00794", 1, 1,
    "He", "Helium", "4.002602", 18, 1,
    "Li", "Lithium", "6.941", 1, 2,
    "Be", "Beryllium", "9.012182", 2, 2,
    "B", "Boron", "10.811", 13, 2,
    "C", "Carbon", "12.0107", 14, 2,
    "N", "Nitrogen", "14.0067", 15, 2,
    "O", "Oxygen", "15.9994", 16, 2,
    "F", "Fluorine", "18.9984032", 17, 2,
    "Ne", "Neon", "20.1797", 18, 2,
    "Na", "Sodium", "22.98976...", 1, 3,
    "Mg", "Magnesium", "24.305", 2, 3,
    "Al", "Aluminium", "26.9815386", 13, 3,
    "Si", "Silicon", "28.0855", 14, 3,
    "P", "Phosphorus", "30.973762", 15, 3,
    "S", "Sulfur", "32.065", 16, 3,
    "Cl", "Chlorine", "35.453", 17, 3,
    "Ar", "Argon", "39.948", 18, 3,
    "K", "Potassium", "39.948", 1, 4,
    "Ca", "Calcium", "40.078", 2, 4,
    "Sc", "Scandium", "44.955912", 3, 4,
    "Ti", "Titanium", "47.867", 4, 4,
    "V", "Vanadium", "50.9415", 5, 4,
    "Cr", "Chromium", "51.9961", 6, 4,
    "Mn", "Manganese", "54.938045", 7, 4,
    "Fe", "Iron", "55.845", 8, 4,
    "Co", "Cobalt", "58.933195", 9, 4,
    "Ni", "Nickel", "58.6934", 10, 4,
    "Cu", "Copper", "63.546", 11, 4,
    "Zn", "Zinc", "65.38", 12, 4,
    "Ga", "Gallium", "69.723", 13, 4,
    "Ge", "Germanium", "72.63", 14, 4,
    "As", "Arsenic", "74.9216", 15, 4,
    "Se", "Selenium", "78.96", 16, 4,
    "Br", "Bromine", "79.904", 17, 4,
    "Kr", "Krypton", "83.798", 18, 4,
    "Rb", "Rubidium", "85.4678", 1, 5,
    "Sr", "Strontium", "87.62", 2, 5,
    "Y", "Yttrium", "88.90585", 3, 5,
    "Zr", "Zirconium", "91.224", 4, 5,
    "Nb", "Niobium", "92.90628", 5, 5,
    "Mo", "Molybdenum", "95.96", 6, 5,
    "Tc", "Technetium", "(98)", 7, 5,
    "Ru", "Ruthenium", "101.07", 8, 5,
    "Rh", "Rhodium", "102.9055", 9, 5,
    "Pd", "Palladium", "106.42", 10, 5,
    "Ag", "Silver", "107.8682", 11, 5,
    "Cd", "Cadmium", "112.411", 12, 5,
    "In", "Indium", "114.818", 13, 5,
    "Sn", "Tin", "118.71", 14, 5,
    "Sb", "Antimony", "121.76", 15, 5
];

  // 用于创建 three.js 场景
  var camera, scene, renderer;
  // 可选控件变量
  var controls;

  // 存储图片元素和相关信息的数组
  var objects = [];
  var targets = { table: [], sphere: [], helix: [], grid: [] };

  init();
  animate();

  function init() {
    // 创建相机对象，参数为画布的纵横比、近边界、远边界
    camera = new THREE.PerspectiveCamera(
      // 视场角
      40,
      // 纵横比
      window.innerWidth / window.innerHeight,
      // 近区间截面
      1,
      // 远区间截面
      10000
    );
    // 设置相机的位置
    camera.position.z = 3000;
    // 创建场景对象
    scene = new THREE.Scene();

    // table.length设置为图片数量 * 5，遍历循环
    for (var i = 0; i < table.length; i += 5) {
      // 创建div元素，类名为"element"
      var element = document.createElement("div");
      element.className = "element";
      // 随机设置div元素的背景颜色
      element.style.backgroundColor =
        "rgba(0,127,127," + (Math.random() * 0.5 + 0.25) + ")";
      // 设置div元素的背景图片
      element.style.backgroundImage =
        'url("https://zang-1307996497.cos.ap-beijing.myqcloud.com/Image/photo' + (i / 5 + 1) + '.jpg")';
      // 设置div元素的提示文本
      element.title = "纪念相册 - " + (i / 5 + 1) + "/" + Math.ceil(table.length / 5);
      // 设置div元素的链接
      element.setAttribute(
        "href",
        "https://zang-1307996497.cos.ap-beijing.myqcloud.com/Image/photo" + (i / 5 + 1) + ".jpg"
      );

      // =================================== 开始绘制单面 ===================================
      // 创建CSS3DObject对象，参数为div元素
      var object = new THREE.CSS3DObject(element);

      // 随机设置CSS3DObject对象的位置坐标
      object.position.x = Math.random() * 4000 - 2000;
      object.position.y = Math.random() * 4000 - 2000;
      object.position.z = Math.random() * 4000 - 2000;
      // 将CSS3DObject对象添加到场景中
      scene.add(object);
      // 将CSS3DObject对象添加到数组objects中
      objects.push(object);

      // 创建Object3D对象，用来控制表格中每一个div元素的排列
      var object = new THREE.Object3D();
      // 根据table变量中对应位置的值，设置Object3D对象的位置坐标
      // object.position.x = table[i + 3] * 140 - 1330;
      // object.position.y = -(table[i + 4] * 180) + 990;
      object.position.x = table[i + 3] * 140 - 1260;
      object.position.y = -(table[i + 4] * 180) + 990;
      // 将Object3D对象添加到数组targets.table中
      targets.table.push(object);
    }
    // =================================== 开始绘制单面 ===================================

    // =================================== 开始绘制球体 ===================================
    // 创建一个名为vector的三维向量对象
    var vector = new THREE.Vector3();
    // 遍历objects数组中所有的Object3D对象，并依次进行以下操作
    for (var i = 0, l = objects.length; i < l; i++) {
      // 根据当前div元素在对象列表的位置i和总数l的比例，计算phi、theta角度
      var phi = Math.acos(-1 + (2 * i) / l);
      var theta = Math.sqrt(l * Math.PI) * phi;
      // 创建一个新的Object3D对象
      var object = new THREE.Object3D();
      // 以球体形式排列每个div元素的位置
      object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
      object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
      object.position.z = 800 * Math.cos(phi);
      // 将这个Object3D对象的位置坐标再放大2倍，用于指定div元素正面与视点的朝向
      vector.copy(object.position).multiplyScalar(2);
      // 通过使用lookAt()方法，将Object3D对象的"z"轴转向相机所在的位置
      object.lookAt(vector);
      // 将这个Object3D对象添加到targets.sphere数组中
      targets.sphere.push(object);
    }
    // =================================== 绘制球体结束 ===================================

    // =================================== 开始绘制螺旋 ===================================
    // 创建一个名为vector的三维向量对象
    var vector = new THREE.Vector3();

    for (var i = 0, l = objects.length; i < l; i++) {
      // 根据当前div元素在对象列表的位置i计算phi角度，结合圆柱体的一种特殊布局方案
      var phi = i * 0.175 + Math.PI;
      // 创建一个新的Object3D对象
      var object = new THREE.Object3D();
      
      // 将这个Object3D对象设置到圆柱螺旋形布局中心，
      // object.position.x和object.position.z以正弦余弦函数来定义div元素位置
      object.position.x = 900 * Math.sin(phi);
      object.position.y = -(i * 8) + 450;
      object.position.z = 900 * Math.cos(phi);
      // set vector的值
      vector.x = object.position.x * 2;
      vector.y = object.position.y;
      vector.z = object.position.z * 2;
      // 将Object3D对象的朝向指向vector所在的方向
      object.lookAt(vector);
      // 将这个Object3D对象添加到targets.helix数组中
      targets.helix.push(object);
    }
    // =================================== 结束绘制螺旋 ===================================

    // =================================== 开始绘制多面 ===================================

    for (var i = 0; i < objects.length; i++) {
      var object = new THREE.Object3D();

      object.position.x = (i % 5) * 400 - 800;
      object.position.y = -(Math.floor(i / 5) % 5) * 400 + 800;
      object.position.z = Math.floor(i / 25) * 1000 - 2000;

      targets.grid.push(object);
    }
    // =================================== 结束绘制多面 ===================================


    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.position = "absolute";
    document.getElementById("container").appendChild(renderer.domElement);


    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.rotateSpeed = 0.5;
    controls.minDistance = 500;
    controls.maxDistance = 6000;
    controls.addEventListener("change", render);

    var button = document.getElementById("table");
    button.addEventListener(
      "click",
      function (event) {
        transform(targets.table, 2000);
      },
      false
    );

    var button = document.getElementById("sphere");
    button.addEventListener(
      "click",
      function (event) {
        transform(targets.sphere, 2000);
      },
      false
    );

    var button = document.getElementById("helix");
    button.addEventListener(
      "click",
      function (event) {
        transform(targets.helix, 2000);
      },
      false
    );

    var button = document.getElementById("grid");
    button.addEventListener(
      "click",
      function (event) {
        transform(targets.grid, 2000);
      },
      false
    );

    transform(targets.sphere, 3000);

    //

    window.addEventListener("resize", onWindowResize, false);
  }

  function transform(targets, duration) {
    TWEEN.removeAll();

    for (var i = 0; i < objects.length; i++) {
      var object = objects[i];
      var target = targets[i];

      new TWEEN.Tween(object.position)
        .to(
          { x: target.position.x, y: target.position.y, z: target.position.z },
          Math.random() * duration + duration
        )
        .easing(TWEEN.Easing.Exponential.InOut)
        .start();

      new TWEEN.Tween(object.rotation)
        .to(
          { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z },
          Math.random() * duration + duration
        )
        .easing(TWEEN.Easing.Exponential.InOut)
        .start();
    }

    new TWEEN.Tween(this)
      .to({}, duration * 2)
      .onUpdate(render)
      .start();
  }

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

    render();
  }

  function animate() {
    requestAnimationFrame(animate);

    TWEEN.update();

    controls.update();
  }

  function render() {
    renderer.render(scene, camera);
  }
})();

$(function () {
  $("div.element").imgbox({
    speedIn: 0,
    speedOut: 0,
    // 'allowMultiple'	: false,
    overlayShow: true,
    zoomOpacity: true,
    alignment: "center",
  });

  var $buttons = $("#menu > button");
  $buttons.bind("click.btns", function (e) {
    $buttons.removeClass("hover");
    $(e.target).addClass("hover");
  });
});
